<script lang="ts" setup>
import { ref } from 'vue'
import AreaBox from './AreaBox.vue'

// interface areaItem {
//     top?: number,
//     left?: number,
//     width?: number,
//     height?: number,
// }
let caseShow = ref(false)
let starX = ref(0)
let starY = ref(0)
let areaWidth = ref(0)
let areaHeight = ref(0)
let areaList = ref<any>([
    
])
const hotRef = ref(null)

const addAera = () => {
    let data = {
        width: 100,
        height:100,
        top:20,
        left: 20
    }
    areaList.value.push(data)
}
const saveAera = () => {
    console.log("保存热区数据===", )
    const hotWidth = hotRef.value.clientWidth
    const hotHeight = hotRef.value.clientHeight
    let newAreaList = areaList.value.map(item => ({
        ...item,
        mWidth: Math.round((item.width / hotWidth) * 100) / 100,
        mHeight: Math.round((item.height / hotHeight) * 100) / 100,
        mTop: Math.round((item.top / hotHeight) * 100) / 100,
        mLeft: Math.round((item.left / hotWidth) * 100) / 100,
    }))
    console.log('newAreaList==', newAreaList)
}

// const mouseDown = async (e: any) => {
//     caseShow.value = true;
//     // 记录滑动的初始值
//     starX.value = e.layerX;
//     starY.value = e.layerY;
//     console.log('滑动初始位置坐标', starX.value, starY.value)
//     // 鼠标滑动的过程
//     if (!document.onmousemove) {
//         document.onmousemove = async (ev: any) => {
//           console.log('==', ev.layerX,ev.layerY)
//           await nextTick()
//           areaWidth.value = ev.layerX - starX.value;
//           areaHeight.value = ev.layerY - starY.value;
//         };
//       }

// }
// // 绘画热区结束
const changeStop = () => {}
// const changeStop = () => {
//     document.onmousemove = null;
//     if (caseShow.value && areaWidth.value > 10 && areaHeight.value > 10) {
//         const data = {
//             top: starY.value,
//             left: starX.value,
//             width: areaWidth.value,
//             height: areaHeight.value,
//         }
//         areaList.value.push(data)
//     }
//     // 初始化绘图
//     caseShow.value = false;
//     starX.value = 0;
//     starY.value = 0;
//     areaWidth.value = 0;
//     areaHeight.value = 0;
// }
</script>
<template>
    <div>
        <h3>热区页面</h3>
        <div class="hot-area-operations">
            <button @click="addAera">添加热区</button>
            <button @click="saveAera">保存热区</button>
        </div>
        <div ref="hotRef" class="hot-area-container" @mouseup.left.stop="changeStop()">
            <img
                src="https://azure.summerfarm.net/pop/4o7otoxnrhn30pcb3.png"
                alt=""
            />
            <!--绘制的热区-->
            <div
                v-show="caseShow"
                class="area"
                :style="{
                    width: areaWidth + 'px',
                    height: areaHeight + 'px',
                    left: starX + 'px',
                    top: starY + 'px',
                }"
            />
            <!--已有的热区-->
            
            <div class="area-list-box">
                <AreaBox
                    v-for="(item, index) in areaList"
                    :id="index"
                    :key="index"
                    :area-init.sync="item"
                    />
            </div>
            <!-- <div class="hot-mask-box"
                ondragstart="return false;"
                oncontextmenu="return false;"
                onselect="document.selection.empty();"
                @mousedown.left.stop="mouseDown($event)"></div> -->
        </div>
    </div>
</template>
<style scoped>
h3 {
    width: 100%;
}
.hot-area-container {
    position: relative;
    width: 700px;
    margin:0 auto;
}
.hot-area-container img {
    width: 100%;
    display: block;
}
.hot-area-operations {
    padding-bottom:10px;
}
.hot-area-operations button {
    margin: 0 10px;
}
.area-list-box {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 10;

}
.area {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 200px;
    top: 300px;
    background: rgba(41,128,185, 0.3);
    border: 1px dashed #34495e;
    z-index: 2;
}
.hot-mask-box {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgba(0,0,0,0.2);
    z-index: 5;
}
</style>
